<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <div class="title">
        <div style="height: 60px; width: 100%;margin-top:15px;margin-left:15px">
          <a-space>
            <span>核验来源：</span>
            <a-select ref="select" v-model:value="role_type" style="width: 120px">
              <a-select-option value="4">乡镇</a-select-option>
              <a-select-option value="3">区级</a-select-option>
            </a-select>  </a-space>
            <a-space style="margin-left: 10px">
              <span>开始时间：</span>
              <a-date-picker v-model:value="startDate" :format="dateFormat" :disabledDate="disabledFutureDate"  />
            </a-space>
            <a-space style="margin-left: 10px">
              <span>结束时间：</span>
              <a-date-picker v-model:value="endDate" :format="dateFormat" :disabledDate="disabledFutureDate"  />
            </a-space>
        
            <a-space style=" margin-right: 10px;">
              <a-button type="primary" @click="searchBtn"> 查询</a-button>
            </a-space>
        
            <a-space style="float: right; margin-right: 10px; ">
              <a-button type="primary" @click="handleExport"> 导出</a-button>
            </a-space>
        </div>
      </div>
      <a-table
        :dataSource="tableData"
        :columns="displayColumns"
        :pagination="false"
        :scroll="{ x: 1500, y: detailTableHeight }"
        bordered
        :loading="loading"
      />

      <!-- <BasicTable @register="registerTable">
          <template #id="{ record }"> </template>
      </BasicTable> -->
    </div>
    <Detail
      v-model:visible="visible"
      title="抽屉标题"
      :width="1500"
      :detailTableHeight="detailTableHeight"
      :closable="true"
      :destroyOnClose="true"
      :data="detailData"
      :detailParams="detailParams"
      :currentqx="currentqx"
      :currentTitle="currentTitle"
      @close="handleClose"
  /></div>
</template>

<script lang="ts" setup>
import moment from 'moment';
import dayjs from 'dayjs';
import { ref, reactive, toRefs, onMounted, onBeforeMount, computed } from 'vue';
import { getNineDangerList } from '/@/api/demo/system'; //统计工作进展
import { useUserStore } from '/@/store/modules/user';
import { iTableData, iTableColumns } from './types/table';
import Detail from './component/detailDrawer.vue';
import { iParams } from './types/params';
import { useGlobSetting } from '/@/hooks/setting';
import { downloadByUrl } from '/@/utils/file/download';
import { useRouter } from 'vue-router';
const userStore = useUserStore();
const globSetting = useGlobSetting();
let userInfo = ref<any>(null);
const visible = ref(false);
const router = useRouter();
let detailData = ref<any[]>([]);
let detailParams = ref({}); // 详情参数
let detailTableHeight = ref<number>(0); // 表格高度
let role_type = ref('3');
let yhdetailTableHeight = ref<number>(0); // 表格高度
const dateFormat = 'YYYY-MM-DD';
let txtKeyWord = ref<string>('');
const startDate = ref<any>(null); // 开始时间
const endDate = ref<any>(null); // 结束时间
let tableHeight = ref<number>(0); // 表格高度

const disabledFutureDate = (current) => {
  return current && current > moment().endOf('day');
};
let data = reactive<{
  tableData: iTableData[];
  tableColumns: iTableColumns[];
  wscolsList: { wch: number }[];
  id: number | any;
  loading: Boolean;
  keyWorld: String;
  currentqx: string; // 当前行政区名称
  currentTitle: string;
  yhcurrentqx: string; // 当前行政区名称
  yhcurrentTitle: string;
  cityToken: string | any;
}>({
  // 表格数据
  tableData: [],
  tableColumns: [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      width: 80,
    },
    {
      title: '区县名称',
      dataIndex: 'xzq',
      key: 'xzq',
      align: 'center',
      width: 100,
      customCell: (row, index, column) => {
        let isNoHzyh = row.xzq !== '汇总' ? true : false;
        let style = 'cursor:pointer;text-decoration: underline; color: blue;';
        let isNoZero = row[column.key] !== 0 ? true : false;
        return {
          style: `${isNoHzyh === true && isNoZero ? style : ''}`,
          class: 'cell-hover',
          onClick: async () => {
            getDetailData(row, index, column, isNoHzyh, isNoZero);
          },
        };
      },
    },
    {
      title: '已核验房屋总数',
      dataIndex: 'cnt',
      key: 'cnt',
      align: 'center',
      width: 120,
    },
    {
      title: '是否满足“双通道”要求',
      children: [
        {
          title: '已满足',
          dataIndex: 'jsrysstd_s',
          key: 'jsrysstd_s',
          width: 100,
          align: 'center',
        },
        {
          title: '未满足',
          dataIndex: 'jsrysstd_f',
          key: 'jsrysstd_f',
          width: 100,
          align: 'center',
        },
      ],
      align: 'center',
      width: 170,
    },
    {
      title: '是否存在彩钢板建筑出租住人',
      children: [
        {
          title: '已存在',
          dataIndex: 'wdwhjgfjgqsyyrkrgbdj_s',
          key: 'wdwhjgfjgqsyyrkrgbdj_s',
          width: 100,
          align: 'center',
        },
        {
          title: '不存在',
          dataIndex: 'wdwhjgfjgqsyyrkrgbdj_f',
          key: 'wdwhjgfjgqsyyrkrgbdj_f',
          width: 100,
          align: 'center',
        },
      ],
      align: 'center',
      width: 170,
    },
    // 居住 商业
    {
      title: '是否存在窗口防护网、广告牌、铁栅栏',
      children: [
        {
          title: '已存在',
          dataIndex: 'sfczckfhwggptzl_s',
          key: 'sfczckfhwggptzl_s',
          width: 100,
          align: 'center',
        },
        {
          title: '不存在',
          dataIndex: 'sfczckfhwggptzl_f',
          key: 'sfczckfhwggptzl_f',
          width: 100,
          align: 'center',
        },
      ],
      align: 'center',
      width: 170,
    },
    // 居住 商业
    {
      title: '电动自行车及蓄电池是否在室内停放充电',
      children: [
        {
          title: '是',
          dataIndex: 'use_electric_bicycle_s',
          key: 'use_electric_bicycle_s',
          width: 100,
          align: 'center',
        },
        {
          title: '否',
          dataIndex: 'use_electric_bicycle_f',
          key: 'use_electric_bicycle_f',
          width: 100,
          align: 'center',
        },
      ],
      align: 'center',
      width: 170,
    },
    //  商业
    {
      title: '服务于房屋的电动自行车充电设施是否按要求建设',
      children: [
        {
          title: '是',
          dataIndex: 'fwyfwdddzxccdsssfayqjshsf_s',
          key: 'fwyfwdddzxccdsssfayqjshsf_s',
          width: 100,
          align: 'center',
        },
        {
          title: '否',
          dataIndex: 'fwyfwdddzxccdsssfayqjshsf_f',
          key: 'fwyfwdddzxccdsssfayqjshsf_f',
          width: 100,
          align: 'center',
        },
      ],
      align: 'center',
      width: 170,
    },
    {
      title: '是否违规使用液化石油气瓶',
      children: [
        {
          title: '是',
          dataIndex: 'use_bottled_liquefied_gas_s',
          key: 'use_bottled_liquefied_gas_s',
          width: 100,
          align: 'center',
        },
        {
          title: '否',
          dataIndex: 'use_bottled_liquefied_gas_f',
          key: 'use_bottled_liquefied_gas_f',
          width: 100,
          align: 'center',
        },
      ],
      align: 'center',
      width: 170,
    },
    {
      title: '疏散通道是否堆放杂物',
      children: [
        {
          title: '是',
          dataIndex: 'use_stacked_items_s',
          key: 'use_stacked_items_s',
          width: 100,
          align: 'center',
        },
        {
          title: '否',
          dataIndex: 'use_stacked_items_f',
          key: 'use_stacked_items_f',
          width: 100,
          align: 'center',
        },
      ],
      align: 'center',
      width: 170,
    },
    {
      title: '是否私拉乱接电线',
      children: [
        {
          title: '是',
          dataIndex: 'slljdx_s',
          key: 'slljdx_s',
          width: 100,
          align: 'center',
        },
        {
          title: '否',
          dataIndex: 'slljdx_f',
          key: 'slljdx_f',
          width: 100,
          align: 'center',
        },
      ],
      align: 'center',
      width: 170,
    },
    {
      title: '其他高风险火灾隐患问题',
      children: [
        {
          title: '是',
          dataIndex: 'notes_s',
          key: 'notes_s',
          width: 100,
          align: 'center',
        },
        {
          title: '否',
          dataIndex: 'notes_f',
          key: 'notes_f',
          width: 100,
          align: 'center',
        },
      ],
      align: 'center',
      width: 170,
    },
  ],
  id: null,
  loading: true,
  keyWorld: '',
  cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
  currentqx: '', // 当前行政区名称
  currentTitle: '', // 当前详情标题
  yhcurrentqx: '', //
  yhcurrentTitle: '', //
  wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
});
// 表格的 ref Dom名称
let { tableData, loading, currentqx, currentTitle, yhcurrentqx, yhcurrentTitle } = toRefs(data);
async function getData() {
  const { role } = userInfo.value;
  let groupname = '';
  if (role === 'City') {
    groupname = 'qxmc';
  } else if (role === 'Area') {
    groupname = 'jzmc';
  } else if (role === 'Street') {
    groupname = 'czmc';
  }
  if (startDate.value == null) {
    let currentDate = moment().format('YYYY-MM-DD');
    const start: any = dayjs(currentDate);
    const end: any = dayjs(currentDate);
    startDate.value = start;
    endDate.value = end;
  }
  let params: iParams = {
    groupname: groupname,
    txtKeyWord: txtKeyWord.value,
    yhly: role_type.value,
    startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
    endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
  };
  // console.log('@市级参数', params);
  loading.value = true;
  let res: any = await getNineDangerList(params);
  console.log('@res--工作进入汇总表', res);

  if (res || res.items.length > 0) {
    loading.value = false;
    res.items.forEach((item: any, index: number) => {
      // item.name = selectClassFlyDict(item.xzqdm);
      item.index = index + 1;
    });
    // console.log('data', data);
    // 算列和

    let cnt = total(res.items, 'cnt');

    let jsrysstd_s = total(res.items, 'jsrysstd_s');
    let jsrysstd_f = total(res.items, 'jsrysstd_f');
    let wdwhjgfjgqsyyrkrgbdj_s = total(res.items, 'wdwhjgfjgqsyyrkrgbdj_s');
    let index_count = res.items.length + 1;
    let wdwhjgfjgqsyyrkrgbdj_f = total(res.items, 'wdwhjgfjgqsyyrkrgbdj_f');
    let sfczckfhwggptzl_s = total(res.items, 'sfczckfhwggptzl_s');
    let sfczckfhwggptzl_f = total(res.items, 'sfczckfhwggptzl_f');
    let use_electric_bicycle_s = total(res.items, 'use_electric_bicycle_s');

    let use_electric_bicycle_f = total(res.items, 'use_electric_bicycle_f');
    let fwyfwdddzxccdsssfayqjshsf_s = total(res.items, 'fwyfwdddzxccdsssfayqjshsf_s');
    let fwyfwdddzxccdsssfayqjshsf_f = total(res.items, 'fwyfwdddzxccdsssfayqjshsf_f');
    let use_bottled_liquefied_gas_s = total(res.items, 'use_bottled_liquefied_gas_s');
    let use_bottled_liquefied_gas_f = total(res.items, 'use_bottled_liquefied_gas_f');
    let use_stacked_items_s = total(res.items, 'use_stacked_items_s');
    let use_stacked_items_f = total(res.items, 'use_stacked_items_f');

    let slljdx_s = total(res.items, 'slljdx_s');
    let slljdx_f = total(res.items, 'slljdx_f');
    let notes_s = total(res.items, 'notes_s');
    let notes_f = total(res.items, 'notes_f');
    let allObj = {
      xzq: '汇总',
      cnt: cnt,
      jsrysstd_s: jsrysstd_s,
      jsrysstd_f: jsrysstd_f,
      wdwhjgfjgqsyyrkrgbdj_s: wdwhjgfjgqsyyrkrgbdj_s,
      wdwhjgfjgqsyyrkrgbdj_f: wdwhjgfjgqsyyrkrgbdj_f,
      sfczckfhwggptzl_s: sfczckfhwggptzl_s,
      index: index_count,
      sfczckfhwggptzl_f: sfczckfhwggptzl_f,
      use_electric_bicycle_s: use_electric_bicycle_s,
      use_electric_bicycle_f: use_electric_bicycle_f,
      fwyfwdddzxccdsssfayqjshsf_s: fwyfwdddzxccdsssfayqjshsf_s,
      fwyfwdddzxccdsssfayqjshsf_f: fwyfwdddzxccdsssfayqjshsf_f,
      use_bottled_liquefied_gas_s: use_bottled_liquefied_gas_s,
      use_bottled_liquefied_gas_f: use_bottled_liquefied_gas_f,
      use_stacked_items_s: use_stacked_items_s,
      use_stacked_items_f: use_stacked_items_f,
      slljdx_s: slljdx_s,
      slljdx_f: slljdx_f,
      notes_s: notes_s,
      notes_f: notes_f,
    };
    data.tableData = [...res.items, allObj];
  }
}
// 计算总数的方法
function total(arr: any, item: any) {
  let total = arr.reduce((pre: any, cur: any) => {
    return parseInt(pre) + parseInt(cur[item]);
  }, 0);
  return total;
}
function searchBtn() {
  data.loading = true;
  getData();
}
const getDetailData = async (row: any, index: number, column: any) => {
  let params: iParams = {
    groupbyLever_code: row.xzqdm,
    groupbyLever_code_project: column.key,
    xzqdm: row.xzqdm,
    txtKeyWord: txtKeyWord.value,
    yhly: role_type.value,
    startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
    endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
  };
  detailParams.value = params;
  data.currentTitle = row.xzq;
    showDrawer();
};



function getUserInfo() {
  const userStore = useUserStore();
  userInfo.value = userStore?.getUserInfo;
}
const displayColumns = computed(() => {
  const { role } = userInfo.value;
  let arr: any[] = [];
  if (role === 'City') {
    // qx
    arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
    return arr;
  } else if (role === 'Area') {
    // jz
    arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
    return arr;
  } else if (role === 'Street') {
    // cun
    arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
    console.log('@Aarr', arr);
    return arr;
  } else {
    return data.tableColumns;
  }
});
function handleExport() {
  const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
  const tk = userStore.getToken;
  downloadByUrl({
      url:
        uriBase +
        '/export/other/Exportlist?access_token=' +
        tk +
        '&yhly=' +
        role_type.value +
        '&startTime=' +
        moment(startDate.value.$d).format('YYYY-MM-DD') +
        '&endTime=' +
        moment(endDate.value.$d).format('YYYY-MM-DD'),
      target: '_blank',
  });
}
const getTableHeight = () => {
  setTimeout(() => {
    // detailTableHeight.value = window.innerHeight - 182;
    // tableHeight.value = window.innerHeight - 292;
    detailTableHeight.value = window.innerHeight - 182;
    yhdetailTableHeight.value = window.innerHeight;
    tableHeight.value = window.innerHeight;
    // console.log(`表格高度`, tableHeight.value);
  });
};
function showDrawer() {
  visible.value = true;
}
function handleClose() {
  visible.value = false;
}

onBeforeMount(() => {
  getUserInfo();
});
onMounted(() => {
  console.log('******隐患信息统计初始化******');
  getData();
  getTableHeight();
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
#map {
  height: calc(100vh - 140px);
}

.x-houseMng-search {
  z-index: 100;
  margin: 6px;
  position: absolute;
}

.root-house-mng-main {
  margin: 6px;
}

.x-village-tabs {
  //z-index: 100;
  //position: absolute;
  width: 60vw;
  margin-top: 6px;
  margin-left: 40px;
  //background-color: rgba(34, 34, 34, 0.6);
  :deep(.ant-form) {
    margin-top: 6px;
  }
}
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td,
.ant-table tfoot > tr > th,
.ant-table tfoot > tr > td {
  padding: 13px 16px !important;
}
</style>
